<template>
  <div class="overview-root runningAnalysis-root">
    <div class="root-top">
      <div class="box-75 overview-left">
        <div class="box-100 box-top-top">
          <formTitleVue
            title="今日报警预警"
          />
          <div class="main-alarmtoday">
            <div class="main-li">
              <img class="mid" src="@/assets/alarm/01.png" alt="">
              <div class="mid">
                <p>报警数</p>
                <div class="mide-bottom">
                  <span class="big-num" style="color:#fc5d5d;">{{todayData.recordNum}}</span>
                  <span class="bottom">较昨日 <i :class="recordCompare.class" :style="recordCompare.color">{{recordCompare.num}}</i></span>
                </div>
              </div>
            </div>
            <div class="main-li">
              <img src="@/assets/alarm/03.png" alt="">
              <div class="mid">
                <p>已处置</p>
                <div class="mide-bottom">
                  <span class="big-num">{{todayData.recordCzNum}}</span>
                  <span class="bottom"></span>
                </div>
              </div>
            </div>
            <div class="main-li">
              <img class="mid" src="@/assets/alarm/02.png" alt="">
              <div class="mid">
                <p>预警数</p>
                <div class="mide-bottom">
                  <span class="big-num">{{todayData.warnNum}}</span>
                  <span class="bottom">较昨日 <i :class="warnCompare.class" :style="warnCompare.color">{{warnCompare.num}}</i></span>
                </div>
              </div>
            </div>
            <div class="main-li">
              <img src="@/assets/alarm/03.png" alt="">
              <div class="mid">
                <p>已处置</p>
                <div class="mide-bottom">
                  <span class="big-num">{{todayData.warnCzNum}}</span>
                  <span class="bottom"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box-100 box-top-bottom">
          <div class="box-66" style="width:58%">
            <monitoringDevice/>
          </div>
          <div class="box-33" style="width:40%">
            <cityAlarmTable/>
          </div>
        </div>
      </div>
      <div class="blank"></div>
      <div class="box box-25">
        <formTitleVue
          title="基础设施统计"
        />
        <div class="main-infrastructure">
          <div class="main-li main-li-100">
            <div class="top">
              <img src="@/assets/alarm/05.png" alt="">
              <div class="right">
                <span>人员密集区域</span>
                <div class="bottom">
                  <div class="bottom-line">
                    <div>人流密度 {{baseInfo.rlmdNum}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="main-li main-li-100">
            <div class="top">
              <img src="@/assets/alarm/04.png" alt="">
              <div class="right">
                <span>交通设施</span>
                <div class="bottom">
                  <div class="bottom-line">
                    <div>道路 {{baseInfo.dlNum}}</div>
                  </div>
                  <div class="bottom-line">
                    <div>桥梁 {{baseInfo.qlNum}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="main-li main-li-100">
            <div class="top">
              <img src="@/assets/alarm/06.png" alt="">
              <div class="right">
                <span>在建工地</span>
                <div class="bottom">
                  <div class="bottom-line">
                    <div>在建工地 {{baseInfo.zjgdNum}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="main-li main-li-100">
            <div class="top">
              <img src="@/assets/alarm/07.png" alt="">
              <div class="right">
                <span>房屋建筑</span>
                <div class="bottom">
                  <div class="bottom-line">
                    <div>建筑 {{baseInfo.jzNum}}</div>
                  </div>
                  <div class="bottom-line">
                    <div>电梯 {{baseInfo.dtNum}}</div>
                  </div>
                  <div class="bottom-line">
                    <div>户外广告 {{baseInfo.hwggNum}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="main-li main-li-100">
            <div class="top">
              <img src="@/assets/alarm/08.png" alt="">
              <div class="right">
                <span>市政设施</span>
                <div class="bottom">
                  <div class="bottom-line">
                    <div class="w50">燃气设施 {{baseInfo.rqNum}}</div>
                    <div class="w50">供水设施 {{baseInfo.gsNum}}</div>
                  </div>
                  <div class="bottom-line">
                    <div class="w50">排水设施 {{baseInfo.psNum}}</div>
                    <div class="w50">环卫设施 {{baseInfo.hwNum}}</div>
                  </div>
                  <div class="bottom-line">
                    <div>综合管廊设施 {{baseInfo.zhglNum}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="box box-100 overview-left overview-bottom">
      <alarmStatistics/>
      <div class="blank"></div>
      <alarmTrend/>
    </div>
    <div class="box box-100 overview-left overview-bottom">
      <earlyWarningStatistics/>
      <div class="blank"></div>
      <earlyWarningTrend/>
    </div>
  </div>
</template>

<script>
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import monitoringDevice from "./components/monitoringDevice.vue"
  import cityAlarmTable from "./components/cityAlarmTable.vue"
  import alarmStatistics from "./components/alarmStatistics.vue"
  import alarmTrend from "./components/alarmTrend.vue"
  import earlyWarningStatistics from "./components/earlyWarningStatistics.vue"
  import earlyWarningTrend from "./components/earlyWarningTrend.vue"
  import { alarmDayListAll, baseNumStatistics } from '@/api/alarm/statistics'


  export default {
    name: "overview",
    components: {
      formTitleVue,monitoringDevice,cityAlarmTable,alarmStatistics,alarmTrend,
      earlyWarningStatistics,earlyWarningTrend,
    },
    data() {
      return {
        todayData:{
          recordNum:0,
          tbRecordNum:0,
          recordCzNum:0,
          recordCzNum1:0,
          warnNum:0,
          tbWarnNum:0,
          warnCzNum:0
        },
        recordCompare:{
          class:"el-icon-caret-bottom",
          color:"color:green",
          num:"0%",
        },
        warnCompare:{
          class:"el-icon-caret-bottom",
          color:"color:green",
          num:"0%",
        },
        baseInfo:{
          rlmdNum:0,
          dlNum:0,
          qlNum:0,
          zjgdNum:0,
          jzNum:0,
          dtNum:0,
          hwggNum:0,
          rqNum:0,
          gsNum:0,
          psNum:0,
          hwNum:0,
          zhglNum:0
        }
      };
    },
    methods: {
      getPercent(today,yesterday){
        if(today==yesterday){
          return {
            class:"el-icon-caret-bottom",
            color:"color:green",
            num:"0%",
          }
        }
        // 同比增长率=（本期数－同期数）÷同期数×100%
        if(today>yesterday){
          let num = today*100 + "%"
          if(yesterday!=0){
            num =((today-yesterday)/yesterday*100).toFixed(2) + "%"
          }
          return {
            class:"el-icon-caret-top",
            color:"color:red",
            num:num,
          }
        }
        if(today<yesterday){
          let num = ((yesterday-today)/yesterday*100).toFixed(2) +"%"
          return {
            class:"el-icon-caret-bottom",
            color:"color:green",
            num:num,
          }
        }
      },
      getTodayNum(){
        // 添加区域标识
        let params = {
          areaCode: this.$store.state.account.user.deptIds
        }
        alarmDayListAll(params).then(res=>{
          if(res.code==200){
            this.todayData = res.data
            this.recordCompare = this.getPercent(res.data.recordNum,res.data.tbRecordNum)
            this.warnCompare = this.getPercent(res.data.warnNum,res.data.tbWarnNum)
            // ============================
            // let temp = {
            //   recordNum: 110,
            //   tbRecordNum: 0,
            //   recordCzNum: 10,
            //   warnNum:0,
            //   tbWarnNum:110,
            //   warnCzNum:20
            // }
            // this.todayData = temp
            // this.recordCompare = this.getPercent(temp.recordNum,temp.tbRecordNum)
            // this.warnCompare = this.getPercent(temp.warnNum,temp.tbWarnNum)
          }
        })
      },
      getBaseData(){
        // 添加区域标识
        let params = {
          areaCode: this.$store.state.account.user.deptIds
        }
        baseNumStatistics(params).then(res=>{
          if(res.code==200){
            this.baseInfo= res.data
          }
        })
      }
    },
    activated(){
      this.getTodayNum()
      this.getBaseData()
    }
  };
</script>

<style lang="scss" scoped>
  @import "@/views/xy/runningAnalysis/runningAnalysis.scss";
  @import "@/views/xy/alarm/overview/overview.scss";
</style>
